<template>
    <div class="login">
         面经登录
         <!-- <div class="username">
            <label>用户名<input type="text" v-model="username" placeholder="请输入用户名" class="inp-username"></label>
         </div>
         <div class="password">
            <label>密码 <input type="password" v-model="password" placeholder="请输入密码" class="inp-password"  @keydown.enter="Login"></label>
         </div>
         <van-button type="warning" size="large" @click="Login" :token="token" >登录</van-button>
         <div class="switch">
              <span @click="$router.replace('/register')">注册账号</span>
         </div> -->

         <van-form @submit="Login">
            <van-field
              v-model="username"
              name="validator"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' },{ pattern:/^\w{5,}$/, message: '用户名至少包含5个字符'}]"
              style="margin-top: 20px;"
            />
            <!-- 是pattern 不是validator -->
            <van-field
              v-model="password"
              type="password"
              name="validator"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码'},{ pattern:/^\w{6,}$/,message: '密码至少包含6个字符'}]"
            />
            <div style="margin: 16px;">
              <van-button    round block type="warning" native-type="submit">提交</van-button>
            </div>
          </van-form>
          <div class="switch">
              <span @click="$router.replace('/register')">注册账号</span>
         </div>
    </div>
</template>

<script>

import { loginApi } from '@/utils/api';
// import { Toast } from 'vant';
export default {
   name:'LoginPage',
   data(){
    return{
        username:'',
        password:'',
        token:''
    }
   },
   methods:{
     async Login(){
        // if(this.username.trim().length<5){
        //     return 
        // }
        // if(this.password.trim().length<6){
        //     return 
        // }
        // const res= await axios.post('http://interview-api-t.itheima.net/h5/user/login',{
        //     username:this.username,
        //     password:this.password
        // })
        // // console.log(res)  //eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjExNTQiLCJpYXQiOjE3MzY4NzE3ODQsImV4cCI6MTczNzEzMDk4NH0.5SPPRS2RD827PPA0QXzn1oNw4eM0SWgrgH8bbO90hXY
        // if(res.code===400){   //有问题 可能需要拦截
        //   this.$toast('用户信息不存在')
        // }
        const res=await loginApi({
           username:this.username,
           password:this.password
        })
        // this.token=res.data.data.token
        this.token=res.data.token
        console.log(this.token) 
        localStorage.setItem('token',this.token) 
        this.$router.push('/home/article/recommend')
        // Toast.success('登录成功')  //
        this.$toast.success('登录成功')  //this.$toast.success('登录成功')  全局方法  挂载在vue实例上的一个方法  // 这个全局this.$toast.success() 也需要要导入Toast   this组件实例   不用在组件内导入
        // this.$toast.fail('登录失败')
        // this.$toast.loading({  //toast的loading正在加载中
        //   duration: 0,
        //   forbidClick: true,  // 禁止点击
        //   loadingType: 'circular' //
        // })
     },
     validator(){
      if(this.username.trim().length<5){  //TODO
         return "用户名至少包含5个字符"
      }
      if(this.password.trim().length<6){
         return "密码至少包含6个字符"
      }
      
        
     }



   },
}
</script>

<style  lang="less" scoped>
// 先完成功能 后补充样式
   .login{
      text-align: center;
      .username{
        margin-top: 40px;
        text-align: start;
        margin-left: 16px;
        label{
          color: #646566;
        }
        .inp-username{
          border: 1px solid transparent;
          outline: none;
          margin-left: 20px;
          &::placeholder{
            color: #999;
          }
        }
      }
      .password{
        margin-top: 40px;
        text-align: start;
        margin-left: 16px;
        label{
          color: #646566;
        }
        .inp-password{
          border: 1px solid transparent;
          outline: none;
          margin-left: 30px;
          &::placeholder{
            color: #999;
          }
        }
        
      }
      button{
        width: 340px;
        height: 44px;
        margin-top: 40px;
        // background-color: #fa6d1d;
        color: white;
      }

      .switch{
        color:#006699;
        font-size: 12px;
        text-align: end;
        padding: 16px;
      }


   }

</style>